<template>
  <div class="articleInfo">
    <!-- 顶部栏 -->
    <div class="topBar">
      <van-nav-bar class="page-nav-bar" title="黑马头条">
        <van-icon slot="left" name="arrow-left" size="18" @click="$router.back()" />
        <van-icon slot="right" name="ellipsis" size="18" @click="move" />
      </van-nav-bar>
    </div>
    <!-- 加载中的状态 -->
    <van-loading color="#1989fa" vertical v-if="isShow=='loading'">加载中...</van-loading>

    <!-- 内容状态 -->
    <div class="content_box" v-else-if="isShow=='content'">
      <!-- 中间内容 -->
      <div class="content">
        <!-- 标题 -->
        <h3>{{articleInfo.title}}</h3>
        <van-cell class="user-info">
          <!-- 图像 -->
          <van-image class="avatar" slot="icon" round fit="cover" :src="articleInfo.aut_photo" />
          <!-- 名字 -->
          <div slot="title" class="user-name">{{articleInfo.aut_name}}</div>
          <!-- 时间 -->
          <div slot="label" class="publish-date">{{articleInfo.pubdate|relativeTime}}</div>
          <!-- 关注 -->

          <div class="guanzhu">
            <guanzhu
              :type="articleInfo.is_followed"
              @follow_toggle="articleInfo.is_followed=$event"
              :userId="articleInfo.aut_id"
            ></guanzhu>
          </div>
        </van-cell>
        <!-- 文字 -->
        <div class="article_text" ref="articleBox" v-html="articleInfo.content"></div>
        <van-divider dashed :style="{ color: '#1989fa', borderColor: '#1989fa'}">正文结束</van-divider>
        <!-- 猜你喜欢 -->
        <slot></slot>
        <!-- 评论区 -->
        <comment-list
          :articleID="articleID"
          :commentList="commentList"
          @set_total_count="total_count=$event"
          @show-reply-popup="$refs.childshowReplyPopUp.showReplyPopUp"
        />
      </div>

      <!-- 底部发表评论区 -->
      <footer class="footer">
        <!-- 按钮 -->
        <van-button
          class="footer_inp"
          plain
          hairline
          type="info"
          @click="showPostComment.condition=true"
        >写评论</van-button>
        <div class="footer_icon">
          <!-- 回复 -->
          <van-icon name="comment-o" :badge="total_count" />
          <!-- 点赞 -->
          <van-icon name="good-job-o" />
          <!-- 收藏 -->
          <van-icon name="star-o" />
          <!-- 分享 -->
          <van-icon name="share" color="#777777"></van-icon>
        </div>
      </footer>
    </div>
    <!-- 加载失败状态 -->
    <!-- 封装一个组件   可以自己传入图片  :img=“url” -->
    <empty v-else @refresh="getArticleInfo($route.params.id)">点击重试</empty>
    <!-- 评论 -->
    <CommentPopup
      v-if="showPostComment.condition"
      :showPostComment="showPostComment"
      :articleId="articleID"
      @articleComment_event="articleComment"
    />

    <!-- 回复弹框 -->
    <reply-popup :articleId="articleID" :commentItem="commentItem" ref="childshowReplyPopUp" />
  </div>
</template>

<script>
import { getArticleInfoData } from "@/api/axios";
import { ImagePreview } from "vant";
import ArticleItem from "@/components/article/article-item";
import empty from "@/components/article/404";
import guanzhu from "@/components/article/guanzhubtn";
import CommentList from "@/components/article/comment-list";
import CommentPopup from "@/components/article/comment-popup";
import ReplyPopup from "@/components/article/reply-popup";

export default {
  name: "articleInfo",
  components: {
    empty,
    guanzhu,
    CommentList,
    CommentPopup,
    ReplyPopup,
  },
  data() {
    return {
      articleID: null,//文章详请id值
      articleInfo: {},//文章详情
      isShow: "loading",
      images: [],//文章详情中的图片项
      commentList: [],//文章评论列表
      commentItem:[],//点击回复当前项信息
      total_count: null,//评论的总条数
      showPostComment: { condition: false },//控制发布评论的显示与影藏
    };
  },
  methods: {
    // 获取文章详情
    async getArticleInfo(id) {
      try {
        const { data: res } = await getArticleInfoData(id);
        // console.log(res);
        this.articleInfo = res.data;
        // 隐藏等待遮挡层
        this.isShow = "content";

        // 为加载图片的预览效果，用到vue中 $.refs操作dom----由于请求数据和渲染DOm元素是异步执行的，所以需要将$refs获取的进行延时获取
        // 使用 setTimeout来巧妙的延时
        setTimeout(() => {
          // 1.找到所有的img便签，
          let articleImg = this.$refs.articleBox.querySelectorAll("img");
          articleImg.forEach((item, index) => {
            // 将图片的src值,push到数组中  // 2.循环遍历找出所有的src属性，并将值储存到数组中
            this.images.push(item.src);
            // 3.给每个img注册地点击事件。来触发vant-ui中的ImagePreview 图片预览组件
            // 动态添加点击事件
            item.addEventListener("click", () => {
              // 调用预览
              ImagePreview({
                images: this.images, //图片数组
                startPosition: index, //当先显示的图片索引
                closeable: true, //显示关闭按钮
              });
            });
          });
        }, 0);
      } catch (err) {
        this.$toast.fail("加载失败");
        // 隐藏等待遮挡层
        this.isShow = "404";
      }
    },
    // 动态修改本地的评论数据
    articleComment(e) {
      console.log(e, "回传数据");
      // 将传入的数据添加在commentList中
      this.commentList.unshift(e);
      // 评论数自加
      this.total_count++;
    },
    move(id) {
      // 更多操作
      console.log("ohh", id);
    },
  },
  created() {
    // 获取地址栏传参
    this.articleID = this.$route.params.id;
    // 获取文章详情
    this.getArticleInfo(this.$route.params.id);
  },
};
</script>

<style scoped lang='less'>
@import url("~@/styles/markdown.css");
// @import url('../../styles/markdown.css');
.articleInfo {
  .van-loading {
    position: absolute;
    top: 30%;
    right: 0;
    left: 0;

    .van-loading__text {
      color: #1989fa;
      font-size: 40px;
    }
  }

  // 上固定
  .topBar {
    height: 90px;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2;
  }

  // 中间自适应
  .content_box {
    overflow-y: scroll;
    position: absolute;
    top: 90px;
    right: 0;
    left: 0;
    bottom: 88px;
    background-color: #fff;
    h3 {
      font-size: 40px;
      margin: 47px 10px;
    }
    .user-info {
      background-color: transparent;
      align-items: center;
      .avatar {
        width: 70px;
        height: 70px;
      }
      .van-cell__title {
        margin-left: 15px;
      }
    }
    .article_text {
      width: 100%;
      padding: 0 35px;
    }
  }

  // 下固定
  .footer {
    height: 88px;
    display: flex;
    align-items: center;
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: #fff;
    z-index: 2;
    border-top: 1px solid #d8d8d8;

    .footer_inp {
      flex: 1;
      width: 282px;
      height: 46px;
      border-radius: 23px;
      border: solid 2px #eeeeee;
      color: #a7a7a7;
      font-size: 30px;
      margin-left: 27px;
      margin-right: 57px;
    }
    .footer_icon {
      flex: 1;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
  }
  .comment-post {
    display: flex;
    align-items: center;
    padding: 32px 0 32px 32px;
    .post-field {
      background-color: #f5f7f9;
    }
    .post-btn {
      width: 150px;
      border: none;
      padding: 0;
      color: #6ba3d8;
      &::before {
        display: none;
      }
    }
  }
}
</style>